<template>
  <details-layout
    :data="data"
    :related="related"
    channel="dataset"
    moreUrl="/dataset"
    contentField="描述"
    titleField="标题"
    dateField="日期">
    <div class="title text-center q-px-lg">{{data.标题}}</div>
    <div class="info row no-wrap relative-position justify-end">
      <div class="type absolute-center">{{$t('类型')}}: {{data.类型}}</div>
      <div class="date">{{data.日期 | normalDate}}</div>
    </div>

    <div class="details">
      <div class="column no-wrap q-py-xl">
        <div class="row properties-list"
          v-for="(prop, idx) in properties|| []"
          :key="idx">
          <div class="col row no-wrap items-center property-entry"
            :class="`property-${prop.value}`"
            v-if="(idx % 2) === 0 && prop">
            <div class="property-label">{{$t(prop.label)}}</div>
            <div class="property-value q-ml-md" v-if="!prop.d">
              {{propertyValue(prop.value)}}</div>
            <div class="property-value q-ml-md" v-else>
            {{propertyValue(prop.value) | normalDate}}</div>
          </div>
          <div class="col row no-wrap items-center property-entry"
            :class="`property-${prop.value}`"
            v-if="(idx % 2) === 0 && properties[idx + 1]">
            <div class="property-label">{{$t(properties[idx + 1].label)}}</div>
            <div class="property-value q-ml-md" v-if="!properties[idx + 1].d">
              {{propertyValue(properties[idx + 1].value)}}</div>
            <div class="property-value q-ml-md" v-else>
            {{propertyValue(properties[idx + 1].value) | normalDate}}</div>
          </div>
        </div>
      </div>

      <div>
        {{data.描述}}
        <q-markdown
          class="readme q-mt-xl"
          v-if="data.readme">{{data.readme}}</q-markdown>
      </div>
    </div>
  </details-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnIDChange, RefreshRelatedOnIDChange } from '../../components/mixins/data';
import DetailsLayout from '../../components/detailsLayout.vue';

export default {
  name: 'DatasetDetails',
  mixins: [mixins.ObjectDataMixin, RefreshOnIDChange, RefreshRelatedOnIDChange],
  components: {
    DetailsLayout,
  },
  data() {
    return {
      related: [],
      properties: [
        {
          label: '子库',
          value: '子库',
        },
        {
          label: '类型',
          value: '类型',
        },
        {
          label: '格式',
          value: '格式',
        },
        {
          label: '大小',
          value: '大小',
        },
        {
          label: '领域',
          value: '领域',
        },
        null,
        {
          label: '文件',
          value: '文件',
        },
        null,
      ],
    };
  },
  created() {
    this.getRelated();
  },
  computed: {
    propertyValue() {
      return (vn) => {
        let v;
        if (typeof vn === 'function') {
          v = vn(this.data);
        } else {
          v = this.data && this.data[vn];
        }

        if (Array.isArray(v)) return v.join('、');

        return v || '';
      };
    },
  },
  methods: {
    getRelated() {
      this.getRequest(`/portal/dataset/related/${this.$route.params.id}`, { limit: 5 }).then((d) => {
        if (d && d.msg === 'OK') {
          this.related = d.data.docs;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
  .properties-list {
   .property-entry {
     padding-top: 6px;
     padding-bottom: 6px;

     border-bottom: 1px solid $grey-4;
    .property-label {
      // width: 120px;
      max-width: 120px;
      min-width: 100px;
      text-align: right;

      color: $primary;
      padding: 2px;
      font-size: 14px;
    }
    .property-value {
      font-size: 14px;
      line-height: 18px;
    }

    &.property-文件 .property-value {
      white-space: pre-line;
      line-height: 18px;
    }
   }

   &:last-child .property-entry {
     border-bottom: none;
   }
  }
</style>
